<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="2" :offset="6">
				<p class="queryLabel">编号或名称:</p>
			</el-col>
			<el-col :span="5">
				<el-input v-model="inputsearch" size="small" placeholder="请输入内容"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" size="small" @click="quesItemquery">搜索</el-button>
			</el-col>
			<el-col :span="9" style="text-align: right;margin-left: -10px;">
				<el-button type="primary" size="small" @click='quesItemAdd' v-if="curentPCode">新增</el-button>
				<el-button type="primary" size="small" @click.native.prevent="quesItemEdit">编辑</el-button>
				<el-button type="primary" size="small" @click.native.prevent="startquesItem">启用</el-button>
				<el-button type="primary" size="small" @click.native.prevent="stopquesItem">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18">
				<el-table ref="multipleTable" :data="tableData.dataList" @selection-change="handleSelectionChange" style="width: 100%">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="itemCode" label="问题编号">
					</el-table-column>
					<el-table-column prop="itemName" label="问题名称">
					</el-table-column>
					<el-table-column prop="dispOrder" label="显示顺序">
					</el-table-column>
					<el-table-column prop="itemType" label="类型" :formatter="covertitemType">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="timeFormates">
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogform">
			<!--问题项弹框-->
			<el-form :model="dataFormModelData" label-width="100px" ref="datamodelForm" :rules="modelRule">
				<el-form-item label="问题项:" style="margin-bottom: 4px;">
				</el-form-item>
				<el-form-item label="分类名称:" prop="groupCode">
					<el-input size="small" v-model="dataFormModelData.groupName" readonly></el-input>
				</el-form-item>
				<el-form-item label="项编码:" prop="itemCode">
					<el-input size="small" v-model="dataFormModelData.itemCode"></el-input>
				</el-form-item>
				<el-form-item label="项名称:" prop="itemName">
					<el-input size="small" v-model="dataFormModelData.itemName"></el-input>
				</el-form-item>
				<el-form-item label="类型:" prop="itemType" label-width="100px">
					<el-select size="small" v-model="dataFormModelData.itemType" placeholder="类型:">
						<el-option v-for="item in quItemTypeArr" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="显示顺序:" prop="dispOrder">
					<el-input-number v-model="dataFormModelData.dispOrder" :min="1" :max="999999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quesItemsave">提交</el-button>
				<el-button @click="dialogform = false">关闭</el-button>
			</div>
		</el-dialog>
		<el-row :span="24" style="margin-top: 30px;">
			<el-col :span="18" :offset="6">
				<el-col :span="2">
					<p class="queryLabel">评分区间:</p>
				</el-col>
				<el-col :span="22" style="text-align: right;margin-left: -10px;">
					<el-button type="primary" size="small" v-if="seleitemType=='0203030102'||(seleitemType=='0203030101'&&tableAreaData.dataList.length==0)" @click='areaAdd'>新增</el-button>
					<el-button type="primary" size="small" v-if="seleitemType=='0203030102'||(seleitemType=='0203030101'&&tableAreaData.dataList.length!=0)" @click.native.prevent="areaDelete">删除</el-button>
					<el-button type="primary" size="small" v-if="seleitemType=='0203030102'" @click.native.prevent="startarea">启用</el-button>
					<el-button type="primary" size="small" v-if="seleitemType=='0203030102'" @click.native.prevent="stoparea">停用</el-button>
				</el-col>
			</el-col>
			<el-col :span="18" :offset="6">
				<el-table ref="multipleTable" :data="tableAreaData.dataList" @selection-change="handleAreaSelectionChange" style="width: 100%">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="areaCode" label="区间编号">
					</el-table-column>
					<el-table-column prop="areaName" label="区间名称">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="timeFormates">
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogAreaform">
			<!--评分区间弹框-->
			<el-form :model="areaDataFormModelData" label-width="100px" ref="dataareaForm" :rules="areaRule">
				<el-form-item label="评分区间:" style="margin-bottom: 4px;">
				</el-form-item>
				<el-form-item label="分类名称:" prop="groupCode">
					<el-input size="small" v-model="areaDataFormModelData.groupName" readonly></el-input>
				</el-form-item>
				<el-form-item label="问题名称:" prop="itemCode">
					<el-input size="small" v-model="areaDataFormModelData.itemName" readonly></el-input>
				</el-form-item>
				<el-form-item label="区间编号:" prop="areaCode">
					<el-input size="small" v-model="areaDataFormModelData.areaCode"></el-input>
				</el-form-item>
				<el-form-item label="区间名称:" prop="areaName">
					<el-input size="small" v-model="areaDataFormModelData.areaName"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="areaSave">提交</el-button>
				<el-button @click="dialogAreaform = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//问题项的弹框
			dialogform: false,
			//评分区间的弹框
			dialogAreaform: false,
			//页码数
			CurentPage: 1,
			page: this.page,
			//问题项分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//评分区间分组数据
			tableAreaData: {
				total: 0,
				dataList: []
			},
			//问题项表单初始值
			emptyData: {
				id: '',
				groupCode: '', //分类编号
				groupName: '',
				itemCode: '', //项编码
				itemName: '',//项名称
				dispOrder: '', //排序
				status: '1',
				itemType: '' //类型
			},
			//问题项表单数据
			dataFormModelData: {
				id: '',
				groupCode: '', //分类编号
				groupName: '',
				itemCode: '', //项编码
				itemName: '',//项名称
				dispOrder: '', //排序
				status: '1',
				itemType: '' //类型
			},
			//评分区间表单初始值
			areaEmptyData: {
				id: '',
				areaCode: '',//区间编码
				areaName: '',//区间名称
				status: '1',//状态
				groupCode: '', //分类编号
				groupName: '',//分类名
				itemName: '',
				itemCode: ''
			},
			//评分区间表单数据
			areaDataFormModelData: {
				id: '',
				areaCode: '',//区间编码
				areaName: '',//区间名称
				status: '1',//状态
				groupCode: '', //分类编号
				groupName: '',//分类名
				itemName: '',
				itemCode: ''
			},
			quItemTypeArr: [], //问题项管理“类型”数组
			paramTreeData: [], //树性数据
			//树型数据配置
			defaultProps: {
				label: 'groupName'
			},
			curentPCode: "", //此刻点击的树的groupCode
			curentPName: "", //此刻点击的树的groupName
			//问题项校验规则：
			modelRule: {
				itemCode: [{
					required: true,
					message: '请输入项编号',
					trigger: 'blur'
				}],
				itemName: [{
					required: true,
					message: '请输入项名称',
					trigger: 'blur'
				}],
				itemType: [{
					required: true,
					message: '请选择类型',
					trigger: 'blur'
				}]
			},
			//评分区间规则
			areaRule: {
				areaCode: [{
					required: true,
					message: '请输入评分区间编号',
					trigger: 'blur'
				}],
				areaName: [{
					required: true,
					message: '请输入评分区间名称',
					trigger: 'blur'
				}]
			},
			inputsearch: "",
			formLabelWidth: '120px',
			//问题项复选框
			selectarr: [],
			//问问题项复选框选择值
			selectvalue: '',
			areaselectName: '',
			//评分区间复选框选择值
			selectAreaarr: [],
			//问题项选择对应的itemType
			seleitemType: '',//"0203030101"单选   "0203030102"多选
			areaid: ''
		}
	},
	methods: {
		handleCurrentChange: function (currentPage) {

			this.$data.CurentPage = currentPage;
			this.quesItemquery();
		},
		//点击资源树节点
		handleNodeClick(data) {

			this.$data.curentPCode = data.id;
			this.$data.curentPName = data.groupName;
			//问题项
			this.$data.emptyData.groupCode = data.id;
			this.$data.emptyData.groupName = data.groupName;
			//评分区间
			this.$data.areaEmptyData.groupCode = data.id;
			this.$data.areaEmptyData.groupName = data.groupName;

			this.quesItemquery();
		},
		//问题查询
		quesItemquery: function () {

			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/base/survery/item/page', //url
				params: { //发送的参数
					id: this.$data.curentPCode,
					itemCode: this.$data.inputsearch, //输入框
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {

				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})

		},

		//问题新增
		quesItemAdd: function () {
			this.$data.dataFormModelData = Object.assign(this.$data.dataFormModelData, this.$data.emptyData);
			this.$data.dialogform = true;
		},
		//问题保存
		quesItemsave: function () {
			this.$refs.datamodelForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/crm/base/survery/item/save', this.$data.dataFormModelData)
						.then(resp => {

							if (resp.data.success) {

								this.$message(resp.data.msg);
								this.quesItemquery();
								this.$data.dialogform = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//问题编辑
		quesItemEdit: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/item/info', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$data.dialogform = true;
					this.$data.dataFormModelData = resp.data.data;
					this.$data.dataFormModelData.groupName = this.$data.curentPName;
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//问题启用
		startquesItem: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/item/start', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.quesItemquery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//问题停用
		stopquesItem: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/item/stop', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.quesItemquery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//问题项复选框
		handleSelectionChange: function (value) {

			this.$data.selectarr = value;
			if (this.$data.selectarr.length > 1) {
				this.$message.error("请选择一条数据")
			}
			this.$data.selectvalue = value[0].id;//选择的问题项的值
			this.$data.areaselectName = value[0].itemName;//选择的问题项的名字
			this.$data.areaEmptyData.itemName = value[0].itemName;
			this.$data.areaEmptyData.itemCode = value[0].id;

			this.$data.seleitemType = value[0].itemType;

			this.areaquery(value[0].id);
		},
		//评分区间查询
		areaquery: function (itemcode) {
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/base/survery/area/page', //url
				params: { //发送的参数
					id: itemcode,//itemcode
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {

				// es5写法
				this.$data.tableAreaData.dataList = resp.data.dataList;
			}, function (error) {
				// error
			})

		},
		//评分新增
		areaAdd: function () {
			this.$data.areaDataFormModelData = Object.assign(this.$data.areaDataFormModelData, this.$data.areaEmptyData);
			this.$data.dialogAreaform = true;
		},
		//评分保存
		areaSave: function () {
			this.$refs.dataareaForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/crm/base/survery/area/save', this.$data.areaDataFormModelData)
						.then(resp => {

							if (resp.data.success) {

								this.$message(resp.data.msg);
								this.areaquery(resp.data.data.itemCode);
								this.$data.dialogAreaform = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//评分删除
		areaDelete: function () {
			if (this.$data.selectAreaarr.length == 1) {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/area/impDel', //url
					params: { //发送的参数
						id: this.$data.areaid, //查询条件
					}
				}).then(function (resp) {

					this.$message(resp.data.msg);
					this.areaquery(this.$data.areaEmptyData.itemCode);
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//评分启用
		startarea: function () {
			if (this.$data.selectAreaarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/area/start', //url
					params: { //发送的参数
						id: this.$data.areaid, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.areaquery(this.$data.areaEmptyData.itemCode);
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//评分停用
		stoparea: function () {
			if (this.$data.selectAreaarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/base/survery/area/stop', //url
					params: { //发送的参数
						id: this.$data.areaid //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.areaquery(this.$data.areaEmptyData.itemCode);
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}
		},
		//查询参数树
		queryParamTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/crm/base/survery/item/leftTree', {}).then((response) => {

				this.$data.paramTreeData = response.data.dataList;
			}, (response) => { });
		},

		//评分区间复选框
		handleAreaSelectionChange: function (value) {

			this.$data.selectAreaarr = value;
			if (this.$data.selectAreaarr.length > 1) {
				this.$message.error("请选择一条数据")
			}

			this.$data.areaid = value[0].id;
		},
		timeFormates: function (row, column) {
			if (row.status == 1) return "已启用";
			return "已停用";
		},
		covertitemType: function (row, column) {
			if (row.itemType == '0203030101') return "单项";
			return "多项";
		}
	},
	created: function () {
		this.$data.emptyData.groupCode = '';
		this.$data.emptyData.groupName = '';
		this.$data.emptyData.id = '';
		this.queryParamTree(); //查询树

		//问题项管理“类型”查询
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "02030301"
			}
		}).then((response) => {

			this.$data.quItemTypeArr = response.data;
		}, (response) => { });

	}
}
</script>

<style>

</style>